<template>
  <yt-page title="执法计划" :rightData="rightData">
    <div class="table-head flex">
      <span>时间</span>
      <span>执法进度</span>
      <span>操作</span>
    </div>
    <yt-collapse v-model="active" :list="taskList">
      <div class="flex" slot="title" slot-scope="props">
        <span>{{props.title}}</span>
        <yt-progress class="line" type="line" :lineHeight="15" :percent="getPercent(props)" style="width: 80%">
          {{getPercent(props)}}%
        </yt-progress>
      </div>
      <div slot-scope="scope">
        <yt-cellSwipe :data="1" :items="itemsCellSwipe" v-for="(child, index) in scope.children" :key="index">
          <div class="flex" @click="onClick(child)">
            <span>{{ child.plan_enterprise ? child.plan_enterprise.attributes.EnterpriseName : '' }}</span>
            <span :class="getState(child).state">{{ getState(child).text }}</span>
          </div>
        </yt-cellSwipe>
      </div>
    </yt-collapse>
  </yt-page>
</template>

<script>
import moment from 'moment'
import { commonApi } from '@/common/api/commonApi.js'
import { Picker } from '@/common/plugin/index.js'

export default {
  data() {
    return {
      rightData: [
        {
          font: 'yt-icon yt-icon-add',
          click: () => {
            this.$router.$push('/law/add')
          }
        },
        {
          font: 'iconfont icon-calendar',
          click: () => {
            Picker({
              title: '请选择时间',
              showTemplate: false,
              format: 'YYYY',
              current: '2018',
              confirm: year => this.refresh(year)
            })
          }
        }
      ],
      active: [],
      taskList: [],
      itemsCellSwipe: [
        {
          type: 'red',
          text: '删除',
          click: data => {
            this.$Confirm({
              confirmText: '确认无误',
              cancelText: '容我想想',
              title: '温馨提示',
              desc: '提交后不可修改！您确定要提交吗？'
            })
              .then(() => {})
              .catch(() => {})
          }
        }
      ]
    }
  },
  activated() {
    this.refresh('2018')
  },
  methods: {
    getPercent(item) {
      let len = item.children.length
      let percent = 0
      let activeList = item.children.filter(v => {
        if (v.state === 2 || v.state === 4 || v.state === 6) {
          return true
        }
      })
      percent = activeList.length
      return parseFloat((100 * percent) / len).toFixed(0)
    },
    getState(child) {
      switch (child.state) {
        case 0:
        case 1:
          return {
            text: '待检查',
            state: 'is-default'
          }
        case 2:
        case 4:
        case 6:
          return {
            text: '已完结',
            state: 'is-complete'
          }
        default:
          return {
            text: '进行中',
            state: 'is-active'
          }
      }
    },
    onClick(item) {
      this.$router.$push({
        path: '/law/link',
        query: {
          id: item.id,
          enterprise: item.plan_enterprise.id,
          enterpriseName: item.plan_enterprise.attributes.EnterpriseName,
          programme: item.programme_id.id,
          record: item.record_id.id,
          rectify: item.rectify_id.id,
          review: item.review_id.id
        }
      })
    },
    async refresh(year) {
      let p = commonApi.search('law_plan', {
        contains: { plan_time: year },
        include: [
          'plan_enterprise',
          'programme_id',
          'record_id',
          'rectify_id',
          'review_id'
        ]
      })
      let taskList = await this.$Loading(p)
      let results = []
      taskList.forEach(task => {
        let time = moment(task.plan_time).format('M[月]')
        let obj = results.find(item => item.title === time)
        if (!obj) {
          results.push({
            title: time,
            children: [task]
          })
        } else {
          obj.children.push(task)
        }
      })
      results = results.sort((a, b) => parseInt(a.title) - parseInt(b.title))
      this.taskList = results
    }
  }
}
</script>

<style scoped lang="stylus">
>>> .c-green
  color green

>>> .c-blue
  color #46baff

>>> .yt-collapse-text
  font-size 18px

>>> .yt-collapse-content
  padding 0

>>> .flex
  display flex
  justify-content space-between
  align-items center
  width 100%
  padding 0 15px
  box-sizing border-box

.table-head
  height 50px
  line-height 50px
  background #e8f0f2
  font-weight 500
  font-size 16px

.btn-add
  width 60px
  height 60px
  position fixed
  bottom 20px
  right 15px
  background-color rgba(204, 204, 204, 0.5)
  display flex
  justify-content center
  align-items center
  border-radius 50%

.is-default
  color red

.is-active
  color #46BAFF

.is-complete
  color #29f090
</style>
